<template>
  <div class='container-directorys'>
    <el-card>
      <!-- 搜索栏 -->
      <el-row>
        <el-col :span="18">

          <el-form :model="staInfo" ref="dirRuleForm">
            <el-row>

              <el-col :span="10">
                <el-form-item label="目录名称" prop="directoryName">
                  <el-input style="width:200px" size="small" v-model.trim="staInfo.directoryName"></el-input>
                </el-form-item>
              </el-col>

              <el-col :span="9">
                <el-form-item label="状态" prop="state">
                  <el-select @change="changeHandle" v-model="staInfo.state" placeholder="请选择">
                    <el-option :label="dirValArr[0].val" :value="dirValArr[0].state"></el-option>
                    <el-option :label="dirValArr[1].val" :value="dirValArr[1].state"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="5">
                <el-form-item>
                  <el-button style="margin-left:1px" size="small" @click="removeStaInfo">清除</el-button>
                  <el-button size="small" type="primary" @click="dirSearch">搜索</el-button>
                </el-form-item>

              </el-col>
            </el-row>
          </el-form>

        </el-col>

        <el-col :span="6">
          <el-row>

            <el-col :span="12">
              <span style="margin-left:30px" @click="linkClick">
                <el-link v-if="this.$store.state.palyFalg===true" style=" user-select:none" :underline="false"
                  type="primary"><i class="el-icon-back"></i>返回学科
                </el-link>
                <!-- <el-button type="text"><i class="el-icon-back"></i>返回学科</el-button> -->
              </span>
            </el-col>

            <el-col :span="12">
              <el-button
                size="small"
                type="success"
                icon="el-icon-edit"
                @click="addDialogVisible=true"
              >新增目录</el-button>
            </el-col>

          </el-row>
        </el-col>
      </el-row>

      <!-- 警示框 -->
      <el-alert
        :closable="false"
        :title="`数据一共${counts}条`"
        type="info"
        show-icon
      >
      </el-alert>

      <!-- 学科列表渲染 -->
      <el-table :data="dirTableData" style="width: 100%">
        <el-table-column type="index" label="序号">
        </el-table-column>

        <el-table-column prop="subjectName" label="所属学科">
        </el-table-column>

        <el-table-column prop="directoryName" label="目录名称">
        </el-table-column>

        <el-table-column prop="username" label="创建者">
        </el-table-column>

        <el-table-column prop="addDate" label="创建日期">
          <template v-slot="scope">
            {{scope.row.addDate|timeAgo}}
          </template>
        </el-table-column>

        <el-table-column prop="totals" label="面试题数量">
        </el-table-column>

        <el-table-column prop="state" label="状态">
          <template v-slot="scope">
            {{scope.row.state===1 ? '已启用':'已禁用'}}
          </template>
        </el-table-column>

        <el-table-column label="操作" width="230px">
          <template v-slot="scope">
            <el-button type="text" @click="disableBtn(scope.row)">{{scope.row.state===1?'已启用':'已禁用'}}</el-button>
            <el-button type="text" :disabled="scope.row.state===1?false:true" @click="editHandle(scope.row)">修改
            </el-button>
            <el-button type="text" :disabled="scope.row.state===1?false:true" @click="deleteOpen(scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination
        background @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.page"
        :page-sizes="[5, 10, 20, 50]"
        :page-size="queryInfo.pagesize"
        layout="total, prev, pager, next, sizes, jumper"
        :total="counts"
      >
      </el-pagination>
    </el-card>

    <!-- 新增的弹窗 -->
    <!-- 添加新增 false-->
    <el-dialog title="新增目录" :visible.sync="addDialogVisible" width="30%" @close="btnCancleXZ">
      <el-form :model="addInfo" :rules="addRules" ref="addFormRef" label-width="90px" class="demo-ruleForm">
        <el-form-item prop="subjectID" label="所属学科">
          <el-select v-model="addInfo.subjectID" placeholder="请选择" style="width:90%">
            <el-option
              v-for="item in dirTableData"
              :key="item.id"
              :label="item.subjectName"
              :value="item.subjectID"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="目录名称" prop="directoryName"  style="width:92%">
          <el-input v-model.trim="addInfo.directoryName"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="btnCancleXZ">取 消</el-button>
        <!-- <el-button @click="addDialogVisible = false">取 消</el-button> -->
        <el-button type="primary" @click="addDialogVisibleFn">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 修改弹窗 -->
    <el-dialog title="修改目录" :visible.sync="editDialogVisible" width="30%" @close="btnCancleXG">
      <el-form :model="addInfo" :rules="addRules" ref="editFormRef" label-width="90px" class="demo-ruleForm">
        <el-form-item prop="subjectID" label="所属学科">
          <el-select v-model="addInfo.subjectID" placeholder="请选择" style="width:90%">
            <el-option
              v-for="item in dirTableData"
              :key="item.id"
              :label="item.subjectName"
              :value="item.subjectID"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="目录名称" prop="directoryName" style="width:92%">
          <el-input v-model.trim="addInfo.directoryName"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="btnCancleXG">取 消</el-button>
        <el-button type="primary" @click="editDialogVisibleFn">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// this.$refs.addFormRef.resetFields()
import { list, remove, add, update, changeState } from '../../api/hmmm/directorys'

export default {
  data () {
    return {
      dirValArr: [
        { state: 0, index: 0, val: '已禁用' },
        { state: 1, index: 1, val: '已启用' }
      ],
      dirValue: '',
      dirTableData: [],

      // 查询表单数据
      queryInfo: {
        subjectID: '',
        directoryName: '',
        pagesize: 10,
        page: 1
      },
      // 添加表单数据
      addInfo: {
        directoryName: '',
        id: null,
        subjectID: ''
      },
      // addSeValue: '',
      // 添加修改表单规则
      addRules: {
        directoryName: [
          { required: true, message: '请输入目录名称', trigger: 'blur' }
        ]
      },
      // 修改表单数据
      editDialogVisible: false,
      // 状态，搜索查询
      staInfo: {
        directoryName: '',
        pagesize: 10,
        page: 1,
        state: ''
      },
      // 修改状态
      disable: {
        state: 0,
        id: 1
      },
      counts: 0,
      addDialogVisible: false
    }
  },
  methods: {
    // 修改目录
    editDialogVisibleFn () {
      this.$refs.editFormRef.validate(async (valid) => {
        if (!valid) return
        await update(this.addInfo)
        this.addDialogVisible = false
        this.$refs.editFormRef.resetFields()
        this.getDirList()
        this.editDialogVisible = false
      })
    },
    // 修改目录渲染
    editHandle (row) {
      // console.log(row)
      this.addInfo.directoryName = row.directoryName
      this.addInfo.subjectID = row.subjectID
      this.addInfo.id = row.id
      this.editDialogVisible = true
    },
    // 新增目录
    addDialogVisibleFn () {
      // console.log(this.addInfo)
      if (this.$store.state.palyFalg === true) {
        this.addInfo.subjectID = this.$store.state.subUserId
      }
      this.$refs.addFormRef.validate(async (valid) => {
        if (!valid) return
        await add(this.addInfo)
        this.addDialogVisible = false
        this.removeStaInfo1()
        this.getDirList()
      })
    },
    // 清除新增逻辑
    // 清除搜索表单逻辑
    removeStaInfo1 () {
      this.$refs.addFormRef.resetFields()
    },
    // 删除元素
    deleteOpen (row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        console.log(row)
        const res = await remove(row)
        this.getDirList()
        console.log(res)
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 获取列表数组
    async getDirList () {
      // 判断vuex数据变量，动态添加subjectID
      if (this.$store.state.palyFalg === true) {
        this.queryInfo.subjectID = this.$store.state.subUserId
      } else {
        delete this.queryInfo.subjectID
      }

      const { data: res } = await list(this.queryInfo)
      this.counts = res.counts
      this.dirTableData = res.items
      console.log(res)
    },
    // 一页显示多少
    handleSizeChange (size) {
      // console.log(size)

      this.queryInfo.pagesize = size
      // console.log(this.pagesize)
      this.getDirList()
    },
    // 当前页码数
    handleCurrentChange (num) {
      this.queryInfo.page = num
      this.getDirList()
    },
    // 禁用启用按钮
    async disableBtn (row) {
      // console.log(row)
      // 取反控制状态
      this.disable.state = row.state === 1 ? 0 : 1
      this.disable.id = row.id
      await changeState(this.disable)
      this.getDirList()
    },
    // 下拉框
    async changeHandle (e) {
      this.staInfo.state = e
      const { data: res } = await list(this.staInfo)
      this.counts = res.counts
      this.dirTableData = res.items
    },
    // 搜索
    dirSearch () {
      // this.getDirList()
      if (this.staInfo.state === '' || this.staInfo.state === null) {
        delete this.staInfo.state
      }
      this.$refs.dirRuleForm.validate(async (valid) => {
        if (!valid) return
        const { data: res } = await list(this.staInfo)
        this.counts = res.counts
        this.dirTableData = res.items
        this.removeStaInfo()
      })
    },
    // 清除搜索表单逻辑
    removeStaInfo () {
      this.$refs.dirRuleForm.resetFields()
    },
    // 跳转路由
    linkClick () {
      this.$router.push({ name: 'subjects-list' })
    },
    btnCancleXZ () {
      this.addInfo = {
        directoryName: '',
        id: null,
        subjectID: ''
      }
      this.$refs.addFormRef.resetFields()
      this.addDialogVisible = false
    },

    btnCancleXG () {
      this.addInfo = {
        directoryName: '',
        id: null,
        subjectID: ''
      }
      this.$refs.editFormRef.resetFields()
      this.editDialogVisible = false
    }
  },
  // 初始化生命周期
  created () {
    this.getDirList()
  },
  filters: {
    timeAgo: function (td) {
      const tdr = new Date(td)
      const y = tdr.getFullYear()
      const m = tdr.getMonth() + 1
      const d = tdr.getDate()
      const h = tdr.getHours()
      const i = tdr.getMinutes()
      const s = tdr.getSeconds()
      return `${y}-${m}-${d} ${h}:${i}:${s}`
    }
  }
}
</script>

<style scoped lang='scss'>
.container-directorys {
  padding: 10px 15px;

  .el-row {
    line-height: 36px;
  }
  // 学科按钮样式
  .el-pagination {
    float: right;
    margin: 20px 0 20px 0;
  }
  // 警示框样式
  .el-alert {
    margin-top: 15px;
    margin-bottom: 15px;
  }
}

</style>
